/*
欢迎来到我们的60fps项目！你的目标是使Cam's Pizzeria网站能流畅的运行在60fps下。

在这里的代码中主要有两个问题使性能低于60fps。你能发现并修复它们吗？

在代码中，你会发现一些使用User Timing API(window.performance)的例子，它们使用
console.log()将帧率数据输入到浏览器的控制台中。如果你想了解更多关于User Timing API
的信息，请访问：http://www.html5rocks.com/en/tutorials/webperformance/usertiming/


创建者:
Cameron Pittman, Udacity 课程开发者
cameron@udacity.com
*/

// 你可能已经发现了，这个网站会随机地生成披萨。
// 下面的数组是所有可能组成披萨的原料。
var pizzaIngredients = {};
pizzaIngredients.meats = [
	"Pepperoni",
	"Sausage",
	"Fennel Sausage",
	"Spicy Sausage",
	"Chicken",
	"BBQ Chicken",
	"Chorizo",
	"Chicken Andouille",
	"Salami",
	"Tofu",
	"Bacon",
	"Canadian Bacon",
	"Proscuitto",
	"Italian Sausage",
	"Ground Beef",
	"Anchovies",
	"Turkey",
	"Ham",
	"Venison",
	"Lamb",
	"Duck",
	"Soylent Green",
	"Carne Asada",
	"Soppressata Picante",
	"Coppa",
	"Pancetta",
	"Bresola",
	"Lox",
	"Guanciale",
	"Chili",
	"Beef Jerky",
	"Pastrami",
	"Kielbasa",
	"Scallops",
	"Filet Mignon"
];
pizzaIngredients.nonMeats = [
	"White Onions",
	"Red Onions",
	"Sauteed Onions",
	"Green Peppers",
	"Red Peppers",
	"Banana Peppers",
	"Ghost Peppers",
	"Habanero Peppers",
	"Jalapeno Peppers",
	"Stuffed Peppers",
	"Spinach",
	"Tomatoes",
	"Pineapple",
	"Pear Slices",
	"Apple Slices",
	"Mushrooms",
	"Arugula",
	"Basil",
	"Fennel",
	"Rosemary",
	"Cilantro",
	"Avocado",
	"Guacamole",
	"Salsa",
	"Swiss Chard",
	"Kale",
	"Sun Dried Tomatoes",
	"Walnuts",
	"Artichoke",
	"Asparagus",
	"Caramelized Onions",
	"Mango",
	"Garlic",
	"Olives",
	"Cauliflower",
	"Polenta",
	"Fried Egg",
	"Zucchini",
	"Hummus"
];
pizzaIngredients.cheeses = [
	"American Cheese",
	"Swiss Cheese",
	"Goat Cheese",
	"Mozzarella Cheese",
	"Parmesean Cheese",
	"Velveeta Cheese",
	"Gouda Cheese",
	"Muenster Cheese",
	"Applewood Cheese",
	"Asiago Cheese",
	"Bleu Cheese",
	"Boursin Cheese",
	"Brie Cheese",
	"Cheddar Cheese",
	"Chevre Cheese",
	"Havarti Cheese",
	"Jack Cheese",
	"Pepper Jack Cheese",
	"Gruyere Cheese",
	"Limberger Cheese",
	"Manchego Cheese",
	"Marscapone Cheese",
	"Pecorino Cheese",
	"Provolone Cheese",
	"Queso Cheese",
	"Roquefort Cheese",
	"Romano Cheese",
	"Ricotta Cheese",
	"Smoked Gouda"
];
pizzaIngredients.sauces = [
	"Red Sauce",
	"Marinara",
	"BBQ Sauce",
	"No Sauce",
	"Hot Sauce"
];
pizzaIngredients.crusts = [
	"White Crust",
	"Whole Wheat Crust",
	"Flatbread Crust",
	"Stuffed Crust"
];

// 名称生成器取自 http://saturdaykid.com/usernames/generator.html
// 将每个单词的首字母大写
String.prototype.capitalize = function() {
	return this.charAt(0).toUpperCase() + this.slice(1);
};

// 用生成器发出的随机数来从数组中取出形容词
function getAdj(x) {
	switch(x) {
		case "dark":
			var dark = ["dark", "morbid", "scary", "spooky", "gothic", "deviant", "creepy", "sadistic", "black", "dangerous", "dejected", "haunted",
				"morose", "tragic", "shattered", "broken", "sad", "melancholy", "somber", "dark", "gloomy", "homicidal", "murderous", "shady", "misty",
				"dusky", "ghostly", "shadowy", "demented", "cursed", "insane", "possessed", "grotesque", "obsessed"
			];
			return dark;
		case "color":
			var colors = ["blue", "green", "purple", "grey", "scarlet", "NeonGreen", "NeonBlue", "NeonPink", "HotPink", "pink", "black", "red",
				"maroon", "silver", "golden", "yellow", "orange", "mustard", "plum", "violet", "cerulean", "brown", "lavender", "violet", "magenta",
				"chestnut", "rosy", "copper", "crimson", "teal", "indigo", "navy", "azure", "periwinkle", "brassy", "verdigris", "veridian", "tan",
				"raspberry", "beige", "sandy", "ElectricBlue", "white", "champagne", "coral", "cyan"
			];
			return colors;
		case "whimsical":
			var whimsy = ["whimsical", "silly", "drunken", "goofy", "funny", "weird", "strange", "odd", "playful", "clever", "boastful", "breakdancing",
				"hilarious", "conceited", "happy", "comical", "curious", "peculiar", "quaint", "quirky", "fancy", "wayward", "fickle", "yawning", "sleepy",
				"cockeyed", "dizzy", "dancing", "absurd", "laughing", "hairy", "smiling", "perplexed", "baffled", "cockamamie", "vulgar", "hoodwinked",
				"brainwashed"
			];
			return whimsy;
		case "shiny":
			var shiny = ["sapphire", "opal", "silver", "gold", "platinum", "ruby", "emerald", "topaz", "diamond", "amethyst", "turquoise",
				"starlit", "moonlit", "bronze", "metal", "jade", "amber", "garnet", "obsidian", "onyx", "pearl", "copper", "sunlit", "brass", "brassy",
				"metallic"
			];
			return shiny;
		case "noisy":
			var noisy = ["untuned", "loud", "soft", "shrieking", "melodious", "musical", "operatic", "symphonic", "dancing", "lyrical", "harmonic",
				"orchestral", "noisy", "dissonant", "rhythmic", "hissing", "singing", "crooning", "shouting", "screaming", "wailing", "crying", "howling",
				"yelling", "hollering", "caterwauling", "bawling", "bellowing", "roaring", "squealing", "beeping", "knocking", "tapping", "rapping",
				"humming", "scatting", "whispered", "whispering", "rasping", "buzzing", "whirring", "whistling", "whistled"
			];
			return noisy;
		case "apocalyptic":
			var apocalyptic = ["nuclear", "apocalyptic", "desolate", "atomic", "zombie", "collapsed", "grim", "fallen", "collapsed", "cannibalistic",
				"radioactive", "toxic", "poisonous", "venomous", "disastrous", "grimy", "dirty", "undead", "bloodshot", "rusty", "glowing", "decaying",
				"rotten", "deadly", "plagued", "decimated", "rotting", "putrid", "decayed", "deserted", "acidic"
			];
			return apocalyptic;
		case "insulting":
			var insulting = ["stupid", "idiotic", "fat", "ugly", "hideous", "grotesque", "dull", "dumb", "lazy", "sluggish", "brainless", "slow",
				"gullible", "obtuse", "dense", "dim", "dazed", "ridiculous", "witless", "daft", "crazy", "vapid", "inane", "mundane", "hollow", "vacuous",
				"boring", "insipid", "tedious", "monotonous", "weird", "bizarre", "backward", "moronic", "ignorant", "scatterbrained", "forgetful", "careless",
				"lethargic", "insolent", "indolent", "loitering", "gross", "disgusting", "bland", "horrid", "unseemly", "revolting", "homely", "deformed",
				"disfigured", "offensive", "cowardly", "weak", "villainous", "fearful", "monstrous", "unattractive", "unpleasant", "nasty", "beastly", "snide",
				"horrible", "syncophantic", "unhelpful", "bootlicking"
			];
			return insulting;
		case "praise":
			var praise = ["beautiful", "intelligent", "smart", "genius", "ingenious", "gorgeous", "pretty", "witty", "angelic", "handsome", "graceful",
				"talented", "exquisite", "enchanting", "fascinating", "interesting", "divine", "alluring", "ravishing", "wonderful", "magnificient", "marvelous",
				"dazzling", "cute", "charming", "attractive", "nifty", "delightful", "superior", "amiable", "gentle", "heroic", "courageous", "valiant", "brave",
				"noble", "daring", "fearless", "gallant", "adventurous", "cool", "enthusiastic", "fierce", "awesome", "radical", "tubular", "fearsome",
				"majestic", "grand", "stunning"
			];
			return praise;
		case "scientific":
			var scientific = ["scientific", "technical", "digital", "programming", "calculating", "formulating", "cyberpunk", "mechanical", "technological",
				"innovative", "brainy", "chemical", "quantum", "astro", "space", "theoretical", "atomic", "electronic", "gaseous", "investigative", "solar",
				"extinct", "galactic"
			];
			return scientific;
		default:
			var scientific_default = ["scientific", "technical", "digital", "programming", "calculating", "formulating", "cyberpunk", "mechanical", "technological",
				"innovative", "brainy", "chemical", "quantum", "astro", "space", "theoretical", "atomic", "electronic", "gaseous", "investigative", "solar",
				"extinct", "galactic"
			];
			return scientific_default;
	}
}

// 用生成器发出的随机数来从数组中取出名词
function getNoun(y) {
	switch(y) {
		case "animals":
			var animals = ["flamingo", "hedgehog", "owl", "elephant", "pussycat", "alligator", "dachsund", "poodle", "beagle", "crocodile", "kangaroo",
				"wallaby", "woodpecker", "eagle", "falcon", "canary", "parrot", "parakeet", "hamster", "gerbil", "squirrel", "rat", "dove", "toucan",
				"raccoon", "vulture", "peacock", "goldfish", "rook", "koala", "skunk", "goat", "rooster", "fox", "porcupine", "llama", "grasshopper",
				"gorilla", "monkey", "seahorse", "wombat", "wolf", "giraffe", "badger", "lion", "mouse", "beetle", "cricket", "nightingale",
				"hawk", "trout", "squid", "octopus", "sloth", "snail", "locust", "baboon", "lemur", "meerkat", "oyster", "frog", "toad", "jellyfish",
				"butterfly", "caterpillar", "tiger", "hyena", "zebra", "snail", "pig", "weasel", "donkey", "penguin", "crane", "buzzard", "vulture",
				"rhino", "hippopotamus", "dolphin", "sparrow", "beaver", "moose", "minnow", "otter", "bat", "mongoose", "swan", "firefly", "platypus"
			];
			return animals;
		case "profession":
			var professions = ["doctor", "lawyer", "ninja", "writer", "samurai", "surgeon", "clerk", "artist", "actor", "engineer", "mechanic",
				"comedian", "fireman", "nurse", "RockStar", "musician", "carpenter", "plumber", "cashier", "electrician", "waiter", "president", "governor",
				"senator", "scientist", "programmer", "singer", "dancer", "director", "mayor", "merchant", "detective", "investigator", "navigator", "pilot",
				"priest", "cowboy", "stagehand", "soldier", "ambassador", "pirate", "miner", "police"
			];
			return professions;
		case "fantasy":
			var fantasy = ["centaur", "wizard", "gnome", "orc", "troll", "sword", "fairy", "pegasus", "halfling", "elf", "changeling", "ghost",
				"knight", "squire", "magician", "witch", "warlock", "unicorn", "dragon", "wyvern", "princess", "prince", "king", "queen", "jester",
				"tower", "castle", "kraken", "seamonster", "mermaid", "psychic", "seer", "oracle"
			];
			return fantasy;
		case "music":
			var music = ["violin", "flute", "bagpipe", "guitar", "symphony", "orchestra", "piano", "trombone", "tuba", "opera", "drums",
				"harpsichord", "harp", "harmonica", "accordion", "tenor", "soprano", "baritone", "cello", "viola", "piccolo", "ukelele", "woodwind", "saxophone",
				"bugle", "trumpet", "sousaphone", "cornet", "stradivarius", "marimbas", "bells", "timpani", "bongos", "clarinet", "recorder", "oboe", "conductor",
				"singer"
			];
			return music;
		case "horror":
			var horror = ["murderer", "chainsaw", "knife", "sword", "murder", "devil", "killer", "psycho", "ghost", "monster", "godzilla", "werewolf",
				"vampire", "demon", "graveyard", "zombie", "mummy", "curse", "death", "grave", "tomb", "beast", "nightmare", "frankenstein", "specter",
				"poltergeist", "wraith", "corpse", "scream", "massacre", "cannibal", "skull", "bones", "undertaker", "zombie", "creature", "mask", "psychopath",
				"fiend", "satanist", "moon", "fullMoon"
			];
			return horror;
		case "gross":
			var gross = ["slime", "bug", "roach", "fluid", "pus", "booger", "spit", "boil", "blister", "orifice", "secretion", "mucus", "phlegm",
				"centipede", "beetle", "fart", "snot", "crevice", "flatulence", "juice", "mold", "mildew", "germs", "discharge", "toilet", "udder", "odor", "substance",
				"fluid", "moisture", "garbage", "trash", "bug"
			];
			return gross;
		case "everyday":
			var everyday = ["mirror", "knife", "fork", "spork", "spoon", "tupperware", "minivan", "suburb", "lamp", "desk", "stereo", "television", "TV",
				"book", "car", "truck", "soda", "door", "video", "game", "computer", "calender", "tree", "plant", "flower", "chimney", "attic", "kitchen",
				"garden", "school", "wallet", "bottle"
			];
			return everyday;
		case "jewelry":
			var jewelry = ["earrings", "ring", "necklace", "pendant", "choker", "brooch", "bracelet", "cameo", "charm", "bauble", "trinket", "jewelry",
				"anklet", "bangle", "locket", "finery", "crown", "tiara", "blingBling", "chain", "rosary", "jewel", "gemstone", "beads", "armband", "pin",
				"costume", "ornament", "treasure"
			];
			return jewelry;
		case "places":
			var places = ["swamp", "graveyard", "cemetery", "park", "building", "house", "river", "ocean", "sea", "field", "forest", "woods", "neighborhood",
				"city", "town", "suburb", "country", "meadow", "cliffs", "lake", "stream", "creek", "school", "college", "university", "library", "bakery",
				"shop", "store", "theater", "garden", "canyon", "highway", "restaurant", "cafe", "diner", "street", "road", "freeway", "alley"
			];
			return places;
		case "scifi":
			var scifi = ["robot", "alien", "raygun", "spaceship", "UFO", "rocket", "phaser", "astronaut", "spaceman", "planet", "star", "galaxy",
				"computer", "future", "timeMachine", "wormHole", "timeTraveler", "scientist", "invention", "martian", "pluto", "jupiter", "saturn", "mars",
				"quasar", "blackHole", "warpDrive", "laser", "orbit", "gears", "molecule", "electron", "neutrino", "proton", "experiment", "photon", "apparatus",
				"universe", "gravity", "darkMatter", "constellation", "circuit", "asteroid"
			];
			return scifi;
		default:
			var scifi_default = ["robot", "alien", "raygun", "spaceship", "UFO", "rocket", "phaser", "astronaut", "spaceman", "planet", "star", "galaxy",
				"computer", "future", "timeMachine", "wormHole", "timeTraveler", "scientist", "invention", "martian", "pluto", "jupiter", "saturn", "mars",
				"quasar", "blackHole", "warpDrive", "laser", "orbit", "gears", "molecule", "electron", "neutrino", "proton", "experiment", "photon", "apparatus",
				"universe", "gravity", "darkMatter", "constellation", "circuit", "asteroid"
			];
			return scifi_default;
	}
}

var adjectives = ["dark", "color", "whimsical", "shiny", "noisy", "apocalyptic", "insulting", "praise", "scientific"]; // 披萨名字形容词的种类
var nouns = ["animals", "everyday", "fantasy", "gross", "horror", "jewelry", "places", "scifi"]; // 披萨名字名词的种类

// 生成器随机地为getAdj和getNoun函数生成数字，并返回一个新的披萨名称
function generator(adj, noun) {
	var adjectives = getAdj(adj);
	var nouns = getNoun(noun);
	var randomAdjective = parseInt(Math.random() * adjectives.length);
	var randomNoun = parseInt(Math.random() * nouns.length);
	var name = "The " + adjectives[randomAdjective].capitalize() + " " + nouns[randomNoun].capitalize();
	return name;
}

// 选择随机的形容词及名词
function randomName() {
	var randomNumberAdj = parseInt(Math.random() * adjectives.length);
	var randomNumberNoun = parseInt(Math.random() * nouns.length);
	return generator(adjectives[randomNumberAdj], nouns[randomNumberNoun]);
}

// 这些函数从各自的原料目录中取出并返回随机的原料
var selectRandomMeat = function() {
	var randomMeat = pizzaIngredients.meats[Math.floor((Math.random() * pizzaIngredients.meats.length))];
	return randomMeat;
};

var selectRandomNonMeat = function() {
	var randomNonMeat = pizzaIngredients.nonMeats[Math.floor((Math.random() * pizzaIngredients.nonMeats.length))];
	return randomNonMeat;
};

var selectRandomCheese = function() {
	var randomCheese = pizzaIngredients.cheeses[Math.floor((Math.random() * pizzaIngredients.cheeses.length))];
	return randomCheese;
};

var selectRandomSauce = function() {
	var randomSauce = pizzaIngredients.sauces[Math.floor((Math.random() * pizzaIngredients.sauces.length))];
	return randomSauce;
};

var selectRandomCrust = function() {
	var randomCrust = pizzaIngredients.crusts[Math.floor((Math.random() * pizzaIngredients.crusts.length))];
	return randomCrust;
};

var ingredientItemizer = function(string) {
	return "<li>" + string + "</li>";
};

// 返回嵌套在<li>中的披萨原料字符串
var makeRandomPizza = function() {
	var pizza = "";

	var numberOfMeats = Math.floor((Math.random() * 4));
	var numberOfNonMeats = Math.floor((Math.random() * 3));
	var numberOfCheeses = Math.floor((Math.random() * 2));

	for(var i = 0; i < numberOfMeats; i++) {
		pizza = pizza + ingredientItemizer(selectRandomMeat());
	}

	for(var j = 0; j < numberOfNonMeats; j++) {
		pizza = pizza + ingredientItemizer(selectRandomNonMeat());
	}

	for(var k = 0; k < numberOfCheeses; k++) {
		pizza = pizza + ingredientItemizer(selectRandomCheese());
	}

	pizza = pizza + ingredientItemizer(selectRandomSauce());
	pizza = pizza + ingredientItemizer(selectRandomCrust());

	return pizza;
};

// 为每个披萨分别返回一个DOM元素
var pizzaElementGenerator = function(i) {
	var pizzaContainer, // 披萨的名称、图片及原料清单容器
		pizzaImageContainer, // 披萨图片容器
		pizzaImage, // 披萨的图片
		pizzaDescriptionContainer, // 披萨名称及原料清单容器
		pizzaName, // 披萨名称
		ul; // 原料清单

	pizzaContainer = document.createElement("div");
	pizzaImageContainer = document.createElement("div");
	pizzaImage = document.createElement("img");
	pizzaDescriptionContainer = document.createElement("div");

	pizzaContainer.classList.add("randomPizzaContainer");
	pizzaContainer.style.width = "33.33%";
	pizzaContainer.style.height = "325px";
	pizzaContainer.id = "pizza" + i; // 给每个披萨元素赋一个独一无二的id
	pizzaImageContainer.style.width = "35%";

	pizzaImage.src = "images/pizza.png";
	pizzaImage.classList.add("img-responsive");
	pizzaImageContainer.appendChild(pizzaImage);
	pizzaContainer.appendChild(pizzaImageContainer);

	pizzaDescriptionContainer.style.width = "65%";

	pizzaName = document.createElement("h4");
	pizzaName.innerHTML = randomName();
	pizzaDescriptionContainer.appendChild(pizzaName);

	ul = document.createElement("ul");
	ul.innerHTML = makeRandomPizza();
	pizzaDescriptionContainer.appendChild(ul);
	pizzaContainer.appendChild(pizzaDescriptionContainer);

	return pizzaContainer;
};

// 当网站中"Our Pizzas"的滑窗部分移动时调用resizePizzas(size)函数
var resizePizzas = function(size) {
	window.performance.mark("mark_start_resize"); // User Timing API 函数

	// 改变滑窗前披萨的尺寸值
	function changeSliderLabel(size) {
		switch(size) {
			case "1":
				document.querySelector("#pizzaSize").innerHTML = "Small";
				return;
			case "2":
				document.querySelector("#pizzaSize").innerHTML = "Medium";
				return;
			case "3":
				document.querySelector("#pizzaSize").innerHTML = "Large";
				return;
			default:
				console.log("bug in changeSliderLabel");
		}
	}

	changeSliderLabel(size);

	var percent = 0;
	switch(size) {
		case "1":
			percent = 0.25;
			break;
		case "2":
			percent = 0.3333;
			break;
		case "3":
			percent = 0.5;
			break;
		default:
			console.log("bug in sizeSwitcher");
			return;
	}

	var arrPizzas = document.querySelectorAll(".randomPizzaContainer");
	if(arrPizzas.length <= 0) {
		return;
	}

	var windowWidth = document.querySelector("#randomPizzas").offsetWidth;
	var newWidthPx = percent * windowWidth + 'px';

	// 在下一帧rAF中修改宽度
	requestAnimationFrame(function() {
		arrPizzas.forEach(function(ele) {
			ele.style.width = newWidthPx;
		});
	});

	// User Timing API 太棒了
	window.performance.mark("mark_end_resize");
	window.performance.measure("measure_pizza_resize", "mark_start_resize", "mark_end_resize");
	var timeToResize = window.performance.getEntriesByName("measure_pizza_resize");
	console.log("Time to resize pizzas: " + timeToResize[timeToResize.length - 1].duration + "ms");
};

window.performance.mark("mark_start_generating"); // 收集timing数据

// 这个for循环在页面加载时创建并插入了所有的披萨
for(var i = 2; i < 100; i++) {
	var pizzasDiv = document.getElementById("randomPizzas");
	pizzasDiv.appendChild(pizzaElementGenerator(i));
}

// 使用User Timing API。这里的测量数据告诉了你生成初始的披萨用了多长时间
window.performance.mark("mark_end_generating");
window.performance.measure("measure_pizza_generation", "mark_start_generating", "mark_end_generating");
var timeToGenerate = window.performance.getEntriesByName("measure_pizza_generation");
console.log("Time to generate pizzas on load: " + timeToGenerate[0].duration + "ms");

// 背景披萨滚动时调用函数的次数和
// 由updatePositions()函数使用，用来决定什么时候记录平均帧率
var frame = 0;

// 记录滚动时背景滑窗披萨移动的每10帧的平均帧率
function logAverageFrame(times) { // times参数是updatePositions()由User Timing得到的测量数据
	var numberOfEntries = times.length;
	var sum = 0;
	for(var i = numberOfEntries - 1; i > numberOfEntries - 11; i--) {
		sum = sum + times[i].duration;
	}
	console.log("Average scripting time to generate last 10 frames: " + sum / 10 + "ms");
}

// 下面的关于背景滑窗披萨的代码来自于Ilya的demo:
// https://www.igvita.com/slides/2012/devtools-tips-and-tricks/jank-demo.html

// 基于滚动条位置移动背景中的披萨滑窗
function updatePositions() {
	frame++;
	window.performance.mark("mark_start_frame");
	// 根据滚动条所在的位置，页面上的pizza分别进行水平位移
	// scrollTop在chrome等浏览器下无效，现在改为scrollY
	requestAnimationFrame(function() {
		var scrollY = window.scrollY;
		var items = document.querySelectorAll('.mover');
		for(var i = 0; i < items.length; i++) {
			var phase = Math.sin((scrollY / 1250) + (i % 5)); //  var phase = Math.sin((document.body.scrollTop / 1250) + (i % 5));
			items[i].style.transform = 'translateX(' + 100 * phase + 'px)'; //		items[i].style.left = items[i].basicLeft + 100 * phase + 'px';
		}
	});

	// 再次使用User Timing API。这很值得学习
	// 能够很容易地自定义测量维度
	window.performance.mark("mark_end_frame");
	window.performance.measure("measure_frame_duration", "mark_start_frame", "mark_end_frame");
	if(frame % 10 === 0) {
		var timesToUpdatePosition = window.performance.getEntriesByName("measure_frame_duration");
		logAverageFrame(timesToUpdatePosition);
	}
}

// 在页面滚动时运行updatePositions函数
window.addEventListener('scroll', updatePositions);

// 当页面加载时生成披萨滑窗
document.addEventListener('DOMContentLoaded', function() {

	requestAnimationFrame(function() {
		var cols = 4; // 8;
		var s = 256;
		//	var container = document.querySelector("#movingPizzas1").appendChild(elem);
		var container = document.querySelector("#movingPizzas1");
		for(var i = 0; i < 200; i++) {
			var elem = document.createElement('img');
			elem.className = 'mover';
			elem.src = "images/pizza.png";
			elem.style.height = "100px";
			elem.style.width = "73.333px";
			elem.basicLeft = (i % cols) * s;
			elem.style.left = (i % cols) * s + 'px';
			elem.style.top = (Math.floor(i / cols) * s) + 'px';
			container.appendChild(elem);
		}
	});
	// updatePositions(); // 页面加载之后不需要立即执行更新位置，滚动条还没动，没有意义
});